<!--
 * @Author: 刘鑫
 * @Date: 2020-11-09 19:45:42
 * @LastEditors: 刘鑫
 * @LastEditTime: 2020-11-11 20:07:00
 * @Description: 
-->
<template>
  <div class="home">
    <!-- 搜索框 -->
    <div class="top">
      <input type="text" placeholder="搜索你想知道的一切排名" />
    </div>
    <!-- tab切换 -->
    <div class="tab">
      <span
        v-for="(item, index) in categoryList"
        :key="index"
        :class="state.curIndex === index ? 'active' : ''"
        @click="tab(index, item.id)"
      >
        {{ item.name }}
      </span>
    </div>
    <!-- 动态展示区 -->
    <component
      :is="comp[state.curIndex]"
      :arr="state.newList"
      :banner="bannerList"
      :cityList="cityList"
    ></component>
  </div>
</template>

<script>
import {
  defineComponent,
  computed,
  reactive,
  ref,
  getCurrentInstance,
} from "vue";
import { useStore } from "vuex";
import One from "../../components/One.vue";
import Two from "../../components/Two.vue";
import Three from "../../components/Three.vue";
import Four from "../../components/Four.vue";
import Five from "../../components/Five.vue";
import Six from "../../components/Six.vue";
import Seven from "../../components/Seven.vue";
import Eight from "../../components/Eight.vue";
import Nine from "../../components/Nine.vue";
export default defineComponent({
  name: "Home",
  //子组件
  components: {
    One,
    Two,
    Three,
    Four,
    Five,
    Six,
    Seven,
    Eight,
    Nine,
  },
  setup(props, context) {
    const internalInstance = getCurrentInstance();
    console.log("context...", context, internalInstance);

    //初始值
    let state = reactive({
      curIndex: 0,
      list: [],
      newList: [],

      liveList: [], //生活严选数据
      videoList: [], //影音严选数据
    });
    // let curIndex = ref(0);
    let store = useStore();
    //子组件集合
    const comp = [
      "One",
      "Two",
      "Three",
      "Four",
      "Five",
      "Six",
      "Seven",
      "Eight",
      "Nine",
    ];
    //home数据
    store.dispatch("home/getHomeList", { mid: "0", phoneTerminal: "2" });
    //banner
    store.dispatch("home/getBannerList", { mid: "0", rcid: "0" });
    //展示区 list数据
    store.dispatch("home/getList", { mid: "0" });
    store.dispatch("home/getCityList", {
      mid: "0",
      rankCategoryId: "0",
      city: "郑州市",
      pageNo: "1",
    });

    state.list = computed(() => store.state.home.list);
    //tab切换
    const tab = (index, id) => {
      state.curIndex = index;
      state.newList = state.list[index].rankList;
    };
    return {
      categoryList: computed(() => store.state.home.rankCategoryList),
      bannerList: computed(() => store.state.home.bannerList),
      list: computed(() => store.state.home.list),
      cityList: computed(() => store.state.home.cityList),
      comp,
      tab,
      state,
    };
  },
});
</script>

 <style lang='scss'>
.home {
  width: 100%;
  height: 100%;
  .top {
    display: flex;
    justify-content: center;
    align-items: center;
    input {
      width: 95%;
      height: 30px;
      background: #eee;
      border-radius: 15px;
      border: 0;
      margin-top: 5px;
      font-size: 13px;
      text-indent: 10px;
    }
  }
  .tab {
    width: 100%;
    height: 35px;
    display: flex;
    margin-top: 10px;
    overflow: hidden;
    // justify-content: space-around;
    overflow-x: auto;
    align-items: center;

    span {
      min-width: 60px;
      padding: 4px 0;
      text-align: center;
    }
  }
  .active {
    color: orangered;
    font-weight: 800;
    border-bottom: 2px solid red;
  }
}
::-webkit-scrollbar {
  display: none;
}
</style>